<!--
 * @Author: Mr.Sen
 * @LastEditTime: 2021-02-22 19:21:52
 * @Description: 
 * @Website: https://grimoire.cn
 * @Copyright (c) Mr.Sen All rights reserved.
-->
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="/static/css/login.css" />
</head>

<body>
    <section>

        <!-- 登录 -->

        <div class="container">
            <div class="user singinBx">
                <div class="imgBx"><img src="/static/img/login.jpg" alt=""></div>
                <div class="formBx">
                    <form action="" method="POST" onsubmit="return false">
                        <h2>登录</h2>
                        <input type="text" name="" placeholder="邮箱地址" id="usernameLogin">
                        <input type="password" name="" placeholder="密码" id="passwordLogin">
                        <input type="submit" name="" value="登录" onclick="loginPost()">
                        <p class="signup">没有账号？<a href="#" onclick="toggleForm();">注册</a></p>
                    </form>
                </div>
            </div>

            <!-- 注册 -->

            <div class="user singupBx">
                <div class="formBx">
                    <form action="" method="POST" onsubmit="return false">
                        <h2>注册</h2>
                        <input type="text" name="" placeholder="昵称" id="usernameRegister" autocomplete="new-password">
                        <input type="text" name="" placeholder="邮箱地址" id="emailRegister" >
                        <input type="password" name="" placeholder="密码" id="passwordRegister1" autocomplete="new-password">
                        <input type="password" name="" placeholder="再次输入密码" id="passwordRegister2" autocomplete="new-password">
                        <input type="submit" name="" value="注册" onclick="registerPost()">

                        <p class="signup">已有账号？<a href="#" onclick="toggleForm();">登录</a></p>
                    </form>
                </div>
                <div class="imgBx"><img src="/static/img/register.jpg" alt=""></div>
            </div>

        </div>
    </section>
    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <script type="text/javascript">
        function toggleForm() {
            var container = document.querySelector('.container');
            var background = document.querySelector("section");
            container.classList.toggle('active');
            background.classList.toggle("container-active");
        }

        axios.interceptors.request.use((config) => {
            config.headers['X-Requested-With'] = 'XMLHttpRequest';
            let regex = /.*csrftoken=([^;.]*).*$/;
            config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? "{{csrf_token}}" : document.cookie.match(regex)[1];
            return config;
        });

        function loginPost() {
            layer.load(1);
            var userName = document.querySelector("#usernameLogin").value
            var password = document.querySelector("#passwordLogin").value;
            // 登陆行为
            if (userName == "") {
                layer.msg("用户名不可为空");
                layer.closeAll('loading');
                return false;
            }
            if (password == "") {
                layer.msg("密码不可为空");
                layer.closeAll('loading');
                return false;
            }

            var data = Qs.stringify({
                "username": userName,
                "password": md5(password),
            });

            axios.post(
                "/login/",
                data,
            ).then((response) => {
                if (response.data.status == 1) {
                    // layer.msg("登陆成功");
                    location.href = "/" // 登陆跳转
                } else {
                    layer.msg(response.data.msg);
                    layer.closeAll('loading');
                }
            }).catch((err) => {
                layer.msg("好像发生错误了呢~");
                console.error(err);
                layer.closeAll('loading');
            })
        }

        function registerPost() {
            layer.load(1);
            var userName = document.querySelector("#emailRegister").value;
            var nickname = document.querySelector("#usernameRegister").value;
            var pwd1 = document.querySelector("#passwordRegister1").value;
            var pwd2 = document.querySelector("#passwordRegister2").value;
            // var form3 = document.querySelector("#pwd3");

            if (userName == "") {
                layer.msg("请填写用户名");
                layer.closeAll('loading');
                return false;
            }
            if (pwd1 == "") {
                layer.msg("请填写密码");
                layer.closeAll('loading');
                return false;
            }
            if (pwd1 != pwd2) {
                layer.msg("两次输入的密码不一致");
                layer.closeAll('loading');
                return false;
            }
            if (pwd1.length < 6) {
                layer.msg("密码太短了吧~~");
                layer.closeAll('loading');
                return false;
            }

            var data = Qs.stringify({
                "nickname":nickname,
                "username": userName,
                "password": md5(pwd1),
            });

            axios.post(
                "/register/",
                data,
            ).then((response) => {
                layer.msg(response.data.msg);
                if (response.data.status == 1) {
                    toggleForm()
                }
                layer.closeAll('loading');
            }).catch((err) => {
                layer.msg("好像发生错误了呢~");
                console.error(err)
                layer.closeAll('loading');
            })
        }
    </script>
</body>

</html>